<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../css/element-ui.css">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/content.css">
    <link rel="stylesheet" href="../css/show.css">
    <script src="../js/vue.js"></script>
    <script src="../js/element-ui.js"></script>
    <script src="../js/common.js"></script>
</head>
<body>
<div id="app">
    <el-backtop :bottom="120"></el-backtop>
    <el-container>
        <el-header>
            <el-image fit="cover" src="../images/logo.png"></el-image>
            <div class="top-nav">
                <div class="top-nav-group">
                    <el-link class="top-nav-item" :underline="false">
                        <span>测试链接</span>
                    </el-link>
                </div>
                <div class="top-nav-group">
                    <el-link class="top-nav-item" :underline="false">测试链接</el-link>
                </div>
                <div class="top-nav-group">
                    <el-link class="top-nav-item" :underline="false">测试链接</el-link>
                </div>
                <div class="top-nav-group">
                    <el-link class="top-nav-item" :underline="false">测试链接</el-link>
                </div>
                <div class="top-nav-group">
                    <el-link class="top-nav-item" :underline="false">测试链接</el-link>
                </div>
            </div>
        </el-header>
        <el-main>
            <nav class="main-nav">
                <transition name="el-zoom-in-bottom" mode="out-in">
                    <el-link :underline="false" v-show="search" class="main-nav-item">
                        <span>测试链接</span>
                    </el-link>
                </transition>
                <transition name="el-zoom-in-bottom" mode="out-in">
                    <el-dropdown v-show="search" trigger="click">
                    <span class="el-dropdown-link main-nav-item">
                        测试链接<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>测试链接</el-dropdown-item>
                            <el-dropdown-item>测试链接</el-dropdown-item>
                            <el-dropdown-item>测试链接</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </transition>
                <transition name="el-zoom-in-bottom">
                    <el-dropdown v-show="search" trigger="click">
                    <span class="el-dropdown-link main-nav-item">
                        测试链接<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>测试链接</el-dropdown-item>
                            <el-dropdown-item>测试链接</el-dropdown-item>
                            <el-dropdown-item>测试链接</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </transition>
                <transition name="el-zoom-in-bottom" mode="out-in">
                    <el-dropdown v-show="search" trigger="click">
                    <span class="el-dropdown-link main-nav-item">
                        测试链接<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>测试链接</el-dropdown-item>
                            <el-dropdown-item>测试链接</el-dropdown-item>
                            <el-dropdown-item>测试链接</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </transition>
                <transition name="el-zoom-in-bottom" mode="out-in">
                    <el-dropdown v-show="search" trigger="click">
                    <span class="el-dropdown-link main-nav-item">
                        测试链接<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>测试链接</el-dropdown-item>
                            <el-dropdown-item>测试链接</el-dropdown-item>
                            <el-dropdown-item>测试链接</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </transition>
                <transition name="el-zoom-in-bottom" mode="out-in">
                    <el-dropdown v-show="search" trigger="click">
                    <span class="el-dropdown-link main-nav-item">
                        测试链接<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>测试链接</el-dropdown-item>
                            <el-dropdown-item>测试链接</el-dropdown-item>
                            <el-dropdown-item>测试链接</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </transition>
                <transition name="el-zoom-in-bottom" mode="out-in">
                    <el-dropdown v-show="search" trigger="click">
                    <span class="el-dropdown-link main-nav-item">
                        测试链接<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>测试链接</el-dropdown-item>
                            <el-dropdown-item>测试链接</el-dropdown-item>
                            <el-dropdown-item>测试链接</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </transition>
                <div class="search-group">
                    <div class="el-icon-search" @click="searchExpand" v-show="search"></div>
                </div>
                <transition name="el-zoom-in-top">
                    <el-input size="mini" class="search-input" placeholder="请输入内容" v-show="!search">
                        <i slot="suffix" class="el-input__icon el-icon-close" @click="searchExpand"></i>
                        <el-button slot="append" icon="el-icon-search"></el-button>
                    </el-input>
                </transition>
            </nav>
            <div class="content">
                <div class="left-nav-group">
                    <div class="left-nav">
                        <div class="nav-name">测试链接</div>
                        <el-collapse accordion>
                            <el-collapse-item title="测试链接">
                                <div class="nav-child"><li>测试链接</li></div>
                                <div class="nav-child"><li>测试链接</li></div>
                            </el-collapse-item>
                            <div class="nav-name-item">测试链接</div>
                            <div class="nav-name-item">测试链接</div>
                            <div class="nav-name-item">测试链接</div>
                        </el-collapse>
                    </div>
                </div>
                <div class="main">
                    <el-breadcrumb separator-class="el-icon-arrow-right">
                        <el-breadcrumb-item>
                            <i class="el-icon-s-home"></i>
                            <a href="index.html">测试链接</a>
                        </el-breadcrumb-item>
                        <el-breadcrumb-item>测试链接</el-breadcrumb-item>
                    </el-breadcrumb>
                    <el-divider></el-divider>
                    <el-carousel>
                        <el-carousel-item key="1">
                            <img class="show-item" src="../images/imgshow.jpg">
                        </el-carousel-item>
                        <el-carousel-item key="2">
                            <img class="show-item" src="../images/imgshow2.jpg">
                        </el-carousel-item>
                    </el-carousel>
                </div>
                <div class="img-group">
                    <img src="../images/show1.jpg">
                    <img src="../images/show2.jpg">
                    <img src="../images/show3.jpg">
                    <img src="../images/show4.jpg">
                    <img src="../images/show5.jpg">
                </div>
            </div>
        </el-main>
        <el-footer>
            <div class="footer-text-group">
                <div class="footer-text">地址：四川省雅安市雨城区新康路46号第四行政办公楼</div>
                <div class="footer-text">联系方式：0835—2882230 邮箱：aumdxtw@sicau.edu.cn</div>
                <div class="footer-text">Copyright ©2017 四川农业大学团委 All Rights Reserved.</div>
            </div>
            <div class="footer-img-group">
                <img class="footer-img" src="../images/foot1.jpg">
                <img class="footer-img" src="../images/foot2.png">
                <img class="footer-img" src="../images/foot3.png">
                <img class="footer-img" src="../images/foot4.png">
            </div>
        </el-footer>
    </el-container>
</div>
</body>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                show: true,
                isCollapse: true,
                search: true,
            }
        },
        methods: {
            searchExpand() {
                this.search = !this.search
            },
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            }
        },
        mounted() {
            let that = this
            window.onload = function () {
                let loadTime = window.performance.timing.domContentLoadedEventEnd - window.performance.timing.navigationStart;
                if (loadTime <= 1000) {
                    setTimeout(function () {
                        that.show = false
                    }, 1000);
                } else {
                    that.show = false
                }
            }
        }
    })
</script>
</html>
